<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
		<link rel="stylesheet" href="css/animsition.min.css" />
		<link rel="stylesheet" href="css/drop-down.css" />
		<link rel="stylesheet" href="css/common.css" />
		<link rel="stylesheet" href="css/xsfx.css" />
		<link rel="stylesheet" href="jedate/skin/jedate.css" />
		<link rel="stylesheet" href="css/jquery-labelauty.css" />
	</head>
	<body>
		
		<div class="data_wrap" style="background: #efeff5; width: 1020px; padding: 10px;">
		    <div class="animsition" style="overflow: hidden;">
				<div class="xsfx_tips">
					1.积分分析用于查看时间段内实时分析会员积分区域分布状态
					会员积分贡献排行<br />
					2.时间段以下单时间为准积分包括交易积分和互动积分等所有积分方式；
					<i class="fa fa-close"></i>
				</div>
				 <div class="my_duxs_time" style="position: relative">
					付款时间：
					<input class="datainp wicon" id="inpstart" type="text" placeholder="开始日期" value=""  readonly> ~
					<input class="datainp wicon" id="inpend" type="text" placeholder="结束日期"   readonly style="margin-right: 30px;">

					 积分排行：<select id="jf_select">
						 <option value="dq">当前总积分</option>
					 	 <option value="lj">累计总积分</option>
					     <option value="xh">消耗总积分</option>
					 </select>
					 <button id="my_search">搜索</button>
					 <button id="jf_dc" class="my_btn">导出</button>
			    </div>
			    	<div id="main1" class="my_main2" style="width: 100%; height: 450px; float: left;"></div>
				    <div id="main2" class="my_main2" style="width: 100%; height: 350px; float: left; margin-top: 10px"></div>
		    </div>
		   
		</div>
		
		<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
		<script src="js/jquery-labelauty.js"></script>
		<script src="js/jquery.cityselect.js"></script>
		<script src="jedate/jquery.jedate.min.js"></script>
		<script src="http://www.jq22.com/jquery/jquery-ui-1.11.0.js"></script>
		<script src="js/select-widget-min.js"></script>
		<script src="js/jquery.animsition.min.js"></script>
		<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
		<script src="js/macarons .js"></script>
		<script src="js/common.js"></script>
		<script src="js/sq_data.js"></script>
		
		
		<script>
			$(document).ready(function() {
				//插件初始化
				$(":checkbox").labelauty({
					checked_label: "",
					unchecked_label: "",
				});
				$(":radio").labelauty({
					checked_label: "",
					unchecked_label: "",
				});
				//联动下拉
				$("#city_1").citySelect({
					url:{"citylist":[
							{"p":"新老客户","c":[{"n":"不限"},{"n":"新客户"},{"n":"老客户"}]},
							{"p":"级别","c":[{"n":"LV-0"},{"n":"LV-1"},{"n":"LV-2"},{"n":"LV-3"},{"n":"LV-4"}]}
						]},
					prov:"新老客户",
					city:"不限"
				});
				$("#city_2").citySelect({
				url:{"citylist":[
						{"p":"全国省份排名","c":[{"n":"HTML"},{"n":"CSS","a":[{"s":"CSS2.0"},{"s":"CSS3.0"}]},{"n":"JAVASCIPT"}]},
						{"p":"编程语言","c":[{"n":"C"},{"n":"C++"},{"n":"Objective-C"},{"n":"PHP"},{"n":"JAVA"}]},
						{"p":"数据库","c":[{"n":"Mysql"},{"n":"SqlServer"},{"n":"Oracle"},{"n":"DB2"}]},
					]},
				prov:"全国省份排名",
				city:"",
				dist:"",
				nodata:"none"
			});

			    //调用日期
			    var start = {
				    format: 'YYYY-MM-DD',
				    //minDate: '2014-01-31', //设定最小日期为当前日期
				    festival:true,
				    //isinitVal:true,
				    maxDate: $.nowDate(0), //最大日期
				    choosefun: function(elem,datas){
				        end.minDate = datas; //开始日选好后，重置结束日的最小日期
				        var iNow_maxDate = parseInt(datas.substring(0,4));
				        end.maxDate = datas.replace(new RegExp(iNow_maxDate,"g"),iNow_maxDate + 1);
				    }
				};
				var end = {
				    format: 'YYYY-MM-DD',
				    //minDate: $.nowDate(0), //设定最小日期为当前日期
				    festival:true,
				    //isinitVal:true,
				    maxDate: $.nowDate(0), //最大日期
				    choosefun: function(elem,datas){
				        start.maxDate = datas; //将结束日的初始值设定为开始日的最大日期
				        var iNow_minDate = parseInt(datas.substring(0,4));
				        start.minDate = datas.replace(new RegExp(iNow_minDate,"g"),iNow_minDate - 1);
				    }
				};
				$("#inpstart").jeDate(start);
				$("#inpend").jeDate(end);
				
  			  //初始化切换
			  $(".animsition").animsition({
			  
			    inClass               :   'fade-in-right',
			    outClass              :   'fade-out',
			    inDuration            :    1500,
			    outDuration           :    800,
			    linkElement           :   '.animsition-link',
			    // e.g. linkElement   :   'a:not([target="_blank"]):not([href^=#])'
			    loading               :    true,
			    loadingParentElement  :   'body', //animsition wrapper element
			    loadingClass          :   'animsition-loading',
			    unSupportCss          : [ 'animation-duration',
			                              '-webkit-animation-duration',
			                              '-o-animation-duration'
			                            ],
			    //"unSupportCss" option allows you to disable the "animsition" in case the css property in the array is not supported by your browser.
			    //The default setting is to disable the "animsition" in a browser that does not support "animation-duration".
			    
			    overlay               :   false,
			    
			    overlayClass          :   'animsition-overlay-slide',
			    overlayParentElement  :   'body'
			  });
			  
				var data = [];
				function my_data(){
					
					for( var i =0; i<100; i++){
						data.push(
								{
									name : '名字' + i,
									value :　Math.round(Math.random() * (500 - 100) + 100)
								}
							);
					};
				}
				my_data();
				
				//排名前100
		   		var my_data100;

			   	var my_data100_json;

			   	var my_data100_name;

			   	var my_data100_value;

			   	var len
			   	var iNow_len;
			   	var iNowEnd;
			   	var my_key;
			  	Sort_100(data)
			   	function Sort_100(data,ble){
			   		my_data100 = [];
				   	my_data100_json = [];
				   	my_data100_name = [];
				   	my_data100_value = [];

				   	len = data.length;
				   	iNow_len = len >= 100 ? 100 : len;
				    if(iNow_len >= 80){
						iNowStart = 87;
				   	}
				   	else if(iNow_len >= 60){
						iNowStart = 83;
				   	}
				   	else if(iNow_len >= 40){
						iNowStart = 78;
				   	}
				   	else if(iNow_len >= 20){
						iNowStart = 65;
				   	}
				   	else if(iNow_len >= 15){
						iNowStart = 30;
				   	}
				   	else{
						iNowStart = 0;
				   	}
				   	
				   	for(var i=0; i<len; i++){
				   		my_data100[i] = $.extend(true,{}, data[i]);
				   	}
				   	
					for(var i=0; i<(len >= 100 ? 100 : len); i++){
						my_data100_json.unshift(size('value',my_data100)[0]);
						my_data100_name.unshift(my_data100_json[0].name);
						my_data100_value.unshift(my_data100_json[0].value);
					}

				   	function size(key,obj){
				        var j = obj[0][key];
				        var n = obj[0];
				        var iNow = 0;
				        for (var i=1;i<obj.length ;i++ ){  
				    
				            if(obj[i][key]>j){  
				                j = obj[i][key];  
				                iNow = i;
				            }  
				        }
				        return obj.splice(iNow,1);
				    } 
				   
				    /*console.log(my_data100_num)*/
				   	console.log(my_data100_value)
			   	}

			    // 路径配置
		        require.config({
		            paths: {
		                echarts: 'http://echarts.baidu.com/build/dist'
		            }
		        });

		        // 使用
		        require(
		            [
		                'echarts',
		                'echarts/chart/bar',
		                'echarts/chart/line',
		                'echarts/chart/pie',
		                'echarts/chart/map',// 使用柱状图就加载bar模块，按需加载
		            ],
		            function (ec) {
		                // 基于准备好的dom，初始化echarts图表
		                var myChart = ec.init(document.getElementById('main1'),'macarons');
						var myChart2 = ec.init(document.getElementById('main2'),'macarons');
		                var ecConfig = require('echarts/config');

						var option = {
							backgroundColor : 'white',
							title:{
			        			text : '排名前100',
			        			x : 48,
			        			y : 15,
			        			textStyle : {
			        				fontSize : 12
			        			}
			        		},
						    tooltip : {
						        trigger: 'axis',
						    },
						    toolbox: {
						        show : true,
						        y: 15,
						        x: 800,
						        itemSize : 12,
						        feature : {
						            //mark : {show: true},
						            dataView : {show: true},
						            //magicType: {show: true, type: ['line', 'bar']},
						            restore : {show: true},
						            saveAsImage : {show: true}
						        }
						    },
						    calculable : true,
						    grid :{
						    	x : 100
						    },
						    dataZoom : {
						    	x : 15,
						    	zoomLock : true,
						    	orient : 'vertica',
						        show : true,
						        realtime : true,
						        width: 20,
						        start : iNowStart,
						        end : 100
						    },
						    xAxis : [
						        {
						        	show : false,
						            type : 'value',
						            boundaryGap : [0, 0.01]
						        }
						    ],
						    yAxis : [
						        {
						            type : 'category',
						            data : my_data100_name
						        }
						    ],
						    series : [
						        {
						            name:'人数',
						            type:'bar',
						            barMaxWidth : 10,
						            itemStyle: {
									    normal: {
									        color : '#36a2ef',
									        label : {
									        	show : true
									        }
									    }
									},
						            data:my_data100_value
						        }
						    ]
						};

						var option2 = {
							backgroundColor:'white',
							title:{
								text : '地区分布情况',
								x : 48,
								y : 15,
								textStyle : {
									fontSize : 12
								}
							},
							tooltip : {
								trigger: 'item',
								formatter : '{a}' + '<br/>' + '{b}:{d}%'

							},

							toolbox: {
								show : true,
								y: 15,
								x: 800,
								itemSize : 12,
								feature : {
									//mark : {show: true},
									dataView : {show: true},
									//magicType: {show: true, type: ['line', 'bar']},
									restore : {show: true},
									saveAsImage : {show: true}
								}
							},
							calculable : false,
							series : [
								{
									name:'回购周期',
									type:'pie',
									center:['50%','50%'],
									radius : ['40%', '50%'],
									itemStyle: {
										normal: {
											label:{
												show: true,
												formatter: function(param) {
													return param.name + ' : ' /*+ param.value + ' 占比：'*/ + Math.round(param.percent) + '%';
												},
												textStyle : {
													fontWeight : 'bolder'
												}
											}
										},
										emphasis : {
											label : {
												show : true,
												position : 'center',
												textStyle : {
													fontSize : '30',
													fontWeight : 'bold'
												}
											}
										}
									},
									data:[
										{name: '北京',value: Math.round(Math.random()*1000)},
										{name: '天津',value: Math.round(Math.random()*1000)}
									]

								}
							]
						};


		                // 为echarts对象加载数据
		                myChart.setOption(option);
						myChart2.setOption(option2);

						//点击搜索
						$('#my_search').on('click',function(){

							var data2 = [{name : 'fdsaf', value : 1,num : 10},{name : 'fdsaf', value : 2,num : 20},{name : 'fdsaf', value : 3,num : 15},{name : 'fdsaf', value : 4,num : 50},{name : 'fdsaf', value : 5,num : 100}]
							if($("input[value=js]").is(":checked")){
								option.series[0].data = my_data100_value;
								option.yAxis[0].data = my_data100_name;
							}
							else{
								option.series[0].data = my_data100_num;
								option.yAxis[0].data = my_data100_name2;
							};

							option.dataZoom.end = iNowEnd;

							myChart.clear();
							myChart.setOption(option,true);
						})

		                $('input[name=num]').on('click',function(){
		                	var val = $(this).val();
		                	if(val == 'ze'){
								option.dataZoom.end = iNowEnd;
								option.series[0].data = my_data100_num;
								option.yAxis[0].data = my_data100_name2;
								myChart.clear();
								myChart.setOption(option,true);
		                	}
		                	else{
								option.dataZoom.end = iNowEnd;
								option.series[0].data = my_data100_value;
								option.yAxis[0].data = my_data100_name;
								myChart.clear();
								myChart.setOption(option,true);
		                	}
		                });

			            }
			        );

					//关闭提示
					$('.xsfx_tips  i').on('click',function(){
						$(this).parent().slideUp();
					})
			});
		</script>
	</body>
</html>
